import React from 'react';
import { Surface, Shape, Path } from '@react-native-community/art';
export let DEVICE_WIDTH = Dimensions.get('window').width;
export let DEVICE_HEIGHT = Dimensions.get('window').height;
import {
  StyleSheet,
  View,
  PanResponder,
  Dimensions,
} from 'react-native';
class User extends React.Component {
  constructor() {
    super();
    //加上只有在范围内的显示
    this.state = {
      user: [
        {
          id: 0,
          name: 'gfxm',
          x: (~~(Math.random() * 10) * DEVICE_WIDTH) / 10,
          y: (~~(Math.random() * 10) * DEVICE_HEIGHT) / 10,
        },
      ],
      circlePaths: [
        {
          x: DEVICE_WIDTH / 2,
          y: DEVICE_HEIGHT / 2,
          circlePath: new Path()
            .moveTo(DEVICE_WIDTH / 2, DEVICE_HEIGHT / 2)
            .arc(10, 0, 5, 5, 0)
            .arc(-10, 0, 5, 5, 0),
        },
      ],
      true_user: [
        {
          id: 0,
          name: 'gfxm',
          x: (~~(Math.random() * 10) * DEVICE_WIDTH) / 10,
          y: (~~(Math.random() * 10) * DEVICE_HEIGHT) / 10,
        },
      ],
      true_circlePaths: [
        {
          x: DEVICE_WIDTH / 2,
          y: DEVICE_HEIGHT / 2,
          circlePath: new Path()
            .moveTo(DEVICE_WIDTH / 2, DEVICE_HEIGHT / 2)
            .arc(10, 0, 5, 5, 0)
            .arc(-10, 0, 5, 5, 0),
        },
      ],
    };
    for (let i = 1; i < 10; i++) {
      const temp = {
        id: i,
        name: ' ' + i,
        x: (~~(Math.random() * 10) * DEVICE_WIDTH) / 10,
        y: (~~(Math.random() * 10) * DEVICE_HEIGHT) / 10,
      };
      const x = temp.x - (this.state.user[0].x - DEVICE_WIDTH / 2);
      const y = temp.y - (this.state.user[0].y - DEVICE_HEIGHT / 2);
      const temp2 = {
        x: x,
        y: y,
        circlePath: new Path()
          .moveTo(x, y)
          .arc(10, 0, 5, 5, 0)
          .arc(-10, 0, 5, 5, 0),
      };
      this.state.user.push(temp);
      this.state.circlePaths.push(temp2);
    }
  }
  draw(touchX, touchY) {
    let updateX = (touchX - DEVICE_WIDTH / 2) / 40;
    let updateY = (touchY - DEVICE_HEIGHT / 2) / 40;
    let b = this.state.circlePaths;
    for (let i in this.state.circlePaths) {
      if (i == 0) {
        continue;
      }
      b[i].x = (b[i].x - updateX * 0.5 + DEVICE_WIDTH) % DEVICE_WIDTH;
      b[i].y = (b[i].y - updateY * 0.5 + DEVICE_HEIGHT) % DEVICE_HEIGHT;
      b[i].circlePath = new Path()
        .moveTo(b[i].x, b[i].y)
        .arc(10, 0, 5, 5, 0)
        .arc(-10, 0, 5, 5, 0);
    }

    this.setState({ circlePaths: b });
  }
  draw2(dx, dy) {
    let b = this.state.circlePaths;
    for (let i in this.state.circlePaths) {
      if (i == 0) {
        continue;
      }
      b[i].x = (b[i].x - (dx * 0.5) / 10 + DEVICE_WIDTH) % DEVICE_WIDTH;
      b[i].y = (b[i].y - (dy * 0.5) / 10 + DEVICE_HEIGHT) % DEVICE_HEIGHT;
      b[i].circlePath = new Path()
        .moveTo(b[i].x, b[i].y)
        .arc(10, 0, 5, 5, 0)
        .arc(-10, 0, 5, 5, 0);
    }
    this.setState({ circlePaths: b });
  }
  render() {
    return (
      <View>
        <Surface
          style={styles.User}
          width={DEVICE_WIDTH}
          height={DEVICE_HEIGHT}>
          {this.state.user.map((item, index) => (
            <Shape
              key={index}
              fill={'rgba(226,219,226,' + 0.8 + ')'}
              stroke={'#603030'}
              strokeWidth={10}
              d={this.state.circlePaths[index].circlePath}
            />
          ))}
        </Surface>
      </View>
    );
  }
}
class WaterParticle extends React.Component {
  constructor() {
    super();
    console.log('start');
    this.state = { waterParticles: [], circlePaths: [] };
    for (let i = 0; i < 30; i++) {
      const speed = 0.3 + Math.random();
      const temp = {
        x: (~~(Math.random() * 10) * DEVICE_WIDTH) / 10,
        y: (~~(Math.random() * 10) * DEVICE_HEIGHT) / 10,
        speed: speed < 0.2 ? speed + 0.15 : speed,
      };
      const circlePath = new Path()
        .moveTo(temp.x, temp.y)
        .arc(1, 0, 0.5, 0.5, 0)
        .arc(-1, 0, 0.5, 0.5, 0);
      this.state.waterParticles.push(temp);
      this.state.circlePaths.push(circlePath);
    }
  }
  draw(touchX, touchY) {
    let updateX = (touchX - DEVICE_WIDTH / 2) / 50;
    let updateY = (touchY - DEVICE_HEIGHT / 2) / 50;
    let a = this.state.waterParticles;
    let b = this.state.circlePaths;
    for (let i in this.state.waterParticles) {
      a[i].x = (a[i].x - updateX * a[i].speed + DEVICE_WIDTH) % DEVICE_WIDTH;
      a[i].y = (a[i].y - updateY * a[i].speed + DEVICE_HEIGHT) % DEVICE_HEIGHT;
      b[i] = new Path()
        .moveTo(a[i].x, a[i].y)
        .arc(1, 0, 0.5, 0.5)
        .arc(-1, 0, 0.5, 0.5);
    }
    this.setState({ waterParticles: a, circlePaths: b });
  }
  draw2(dx, dy) {
    let a = this.state.waterParticles;
    let b = this.state.circlePaths;
    for (let i in this.state.waterParticles) {
      a[i].x = (a[i].x - (dx * a[i].speed) / 10 + DEVICE_WIDTH) % DEVICE_WIDTH;
      a[i].y = (a[i].y - (dy * a[i].speed) / 10 + DEVICE_HEIGHT) % DEVICE_HEIGHT;
      b[i] = new Path()
        .moveTo(a[i].x, a[i].y)
        .arc(1, 0, 0.5, 0.5)
        .arc(-1, 0, 0.5, 0.5);
    }
    this.setState({ waterParticles: a, circlePaths: b });
  }
  render() {
    return (
      <View>
        <View>
          <Surface
            style={styles.WaterParticle}
            width={DEVICE_WIDTH}
            height={DEVICE_HEIGHT}>
            {this.state.waterParticles.map((item, index) => (
              <Shape
                key={index}
                fill={
                  'rgba(226,219,226,' +
                  this.state.waterParticles[index].opacity +
                  ')'
                }
                stroke={'#3366FF'}
                strokeWidth={4}
                d={this.state.circlePaths[index]}
              />
            ))}
          </Surface>
        </View>
      </View>
    );
  }
}
export default class UserControl extends React.Component {
  constructor(props) {
    super(props);
    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onPanResponderGrant: (evt, gestureState) => {
        const X = evt.nativeEvent.locationX;
        const Y = evt.nativeEvent.locationY;
        this.update = setInterval(() => {
          this.draw(X, Y);
        }, 50);
      },
      // 移动手势监听回调
      onPanResponderMove: (evt, gestureState) => {
        // Alert.alert("111")
        const X = gestureState.dx;
        const Y = gestureState.dy;
        if (Math.abs(X) > 10 && Math.abs(Y) > 10) {
          clearInterval(this.update);
          this.draw2(X, Y);
        }
      },
      // // 手势动作结束回调
      onPanResponderEnd: (evt, gestureState) => {
      },
      // 手势释放, 响应者释放回调
      onPanResponderRelease: (evt, gestureState) => {
        clearInterval(this.update);
      },
    });
    this.state = {
      x: 0,
      y: 0,
      userTadpole: {
        id: 1,
      },
      tadpoles: {},
      camera: {
        x: 0,
        y: 0,
      },
    };
    this.draw = this.draw.bind(this);
    this.draw2 = this.draw2.bind(this);
  }
  draw(X, Y) {
    this.WaterParticle.draw(X, Y);
    this.User.draw(X, Y);
  }
  draw2(DX, DY) {
    this.WaterParticle.draw2(DX, DY);
    this.User.draw2(DX, DY);
  }
  render() {
    return (
      <View style={styles.box}>
        <View style={styles.body} {...this.panResponder.panHandlers}>
          <WaterParticle ref={node => (this.WaterParticle = node)} />
          <User ref={node => (this.User = node)} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  box: {
    position: 'absolute',
    right: 0,
    top: 0,
    zIndex: -1,
  },
  body: {
    width: DEVICE_WIDTH,
    height: DEVICE_HEIGHT,
  },
  WaterParticle: {
    position: 'absolute',
    width: DEVICE_WIDTH,
    height: DEVICE_HEIGHT,
  },
  User: {
    position: 'absolute',
    width: DEVICE_WIDTH,
    height: DEVICE_HEIGHT,
    elevation: 10,
  },
});
